<template>
  <div v-if="notices.length > 0 && !noticesClosed" class="notices-container mb-2">
    <transition name="notice-fade">
      <div class="notice-wrapper bg-gradient-to-r from-blue-50 to-indigo-50 border-l-4 border-blue-500 py-2 px-4 rounded-md shadow-sm">
        <div class="flex items-center">
          <div class="text-blue-600 mr-3 notice-icon">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
              <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
              <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
            </svg>
          </div>
          <div class="notice-title flex-1 font-medium text-gray-700 hover:text-blue-700 transition-colors cursor-pointer" @click="isExpanded = !isExpanded">
            {{ currentNotice.title }}
          </div>
          
          <div class="text-gray-400 hover:text-red-500 transition-colors cursor-pointer mr-2" @click.stop="closeNotices">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </div>
          
          <div class="text-gray-500 hover:text-blue-600 transition-colors cursor-pointer" @click.stop="isExpanded = !isExpanded">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" :class="{ 'transform rotate-180': isExpanded }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </div>
        </div>

        <transition name="expand">
          <div v-if="isExpanded" class="notice-content mt-3 text-gray-600 text-sm border-t border-gray-100 pt-2" v-html="currentNotice.content"></div>
        </transition>

        <div v-if="notices.length > 1" class="pagination flex justify-center mt-2">
          <div class="flex space-x-2">
            <span
              v-for="(_, index) in notices"
              :key="index"
              @click.stop="currentIndex = index"
              class="cursor-pointer w-2 h-2 rounded-full transition-all duration-300 transform hover:scale-125"
              :class="currentIndex === index ? 'bg-blue-600' : 'bg-gray-300 hover:bg-blue-400'"
            ></span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { getDisplayedNotices } from '@/api/frontend/notices'

const notices = ref([])
const currentIndex = ref(0)
const isExpanded = ref(false)
const loading = ref(false)
const noticesClosed = ref(false)

onMounted(async () => {
  const closedStatus = localStorage.getItem('noticesClosed')
  noticesClosed.value = closedStatus === 'true'
  
  await fetchNotices()
})

watch(notices, (newNotices) => {
  if (newNotices.length > 0 && localStorage.getItem('lastNoticeId') !== newNotices[0].id.toString()) {
    noticesClosed.value = false
    if (newNotices[0] && newNotices[0].id) {
      localStorage.setItem('lastNoticeId', newNotices[0].id.toString())
    }
  }
}, { deep: true })

const currentNotice = computed(() => {
  return notices.value.length > 0 ? notices.value[currentIndex.value] : {}
})

const fetchNotices = async () => {
  loading.value = true
  try {
    const res = await getDisplayedNotices()
    if (res.success) {
      notices.value = res.data
      
      if (notices.value.length > 0) {
        const lastNoticeId = localStorage.getItem('lastNoticeId')
        if (!lastNoticeId || lastNoticeId !== notices.value[0].id.toString()) {
          noticesClosed.value = false
          if (notices.value[0] && notices.value[0].id) {
            localStorage.setItem('lastNoticeId', notices.value[0].id.toString())
          }
        }
      }
    }
  } catch (error) {
    console.error('获取公告失败:', error)
  } finally {
    loading.value = false
  }
}

const closeNotices = () => {
  noticesClosed.value = true
  localStorage.setItem('noticesClosed', 'true')
  
  if (notices.value.length > 0 && notices.value[0].id) {
    localStorage.setItem('lastNoticeId', notices.value[0].id.toString())
  }
}
</script>

<style scoped>
.notices-container {
  transition: all 0.3s ease;
}

.notice-wrapper {
  position: relative;
  overflow: hidden;
}

.notice-icon {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.notice-fade-enter-active, .notice-fade-leave-active {
  transition: opacity 0.5s ease;
}

.notice-fade-enter-from, .notice-fade-leave-to {
  opacity: 0;
}

.expand-enter-active, .expand-leave-active {
  transition: all 0.3s ease-out;
  max-height: 300px;
  overflow: hidden;
}

.expand-enter-from, .expand-leave-to {
  max-height: 0;
  opacity: 0;
}

/* Enhanced styling for notice content */
:deep(.notice-content a) {
  color: #3b82f6;
  text-decoration: underline;
  transition: color 0.2s;
}

:deep(.notice-content a:hover) {
  color: #2563eb;
}

:deep(.notice-content p) {
  margin-bottom: 0.75rem;
}

:deep(.notice-content ul, .notice-content ol) {
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
}

:deep(.notice-content li) {
  margin-bottom: 0.25rem;
}
</style>